// import TableFilterMixin from '@/mixins/TableFilterMixin'
import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import Department from './components/Department'
import { getDepartmentList } from '@/api/system'
import type { DepartmentDto } from '@/api/system/types'
import DepartmentMember from './components/DepartmentMember'
import { Col, Row } from 'ant-design-vue'
import type { AntTreeDto } from '@/api/types'
import type { AnyObject } from '@/types'
import type { DepartMemberDto } from '@/api/sale/types'
import { createAntTreeKey } from '@/utils/util'

@Component
export class StaffManagementView extends Render {

    deptData = [] as AntTreeDto<DepartmentDto>[]

    deptId = null as null | number
    deptName = ''

    async initData() {
        const res = await getDepartmentList()
        this.deptData = createAntTreeKey<DepartmentDto>(res, 'id')
    }

    onDeptClick(data: DepartmentDto) {
        this.deptId = data.id ?? ''
        this.deptName = data.label
    }

    async onMounted() {
        this.initData()
    }

    render() {
        return (
            <div class="h-full p-20px">
                <Row class="h-full" gutter={20}>
                    <Col  lg={6} md={8} sm={24}>
                        <Department deptData={this.deptData} onRefresh={this.initData} onClick={this.onDeptClick}/>
                    </Col>
                    <Col class="h-full" lg={18} md={16} sm={24}>
                        <DepartmentMember deptId={this.deptId as number} deptName={this.deptName || '全部组员列表'}/>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default toNative<{}, {}>(StaffManagementView)